<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: #F5F5F5;
				text-align: center;
			}

			a {
				text-decoration: none;
			}

			p {
				font-size: 14px;
			}

			:focus {
				outline: none;
			}

			#bigbox {
				width: 850px;
				height: 480px;
				background-color: white;
				margin: auto auto;
				position: relative;
				top: 150px;
			}

			.p1 {
				font-size: 30px;
				position: relative;
				top: 40px;
			}

			.logo {
				width: 50px;
				height: 50px;
				background-color: #FF6700;
				/* border-radius: 5%; */
				margin: auto auto;
				position: relative;
				top: 0px;
			}

			.p2 {
				position: relative;
				top: 90px;
				left: -15px;
				color: #666666;
			}

			#yanzheng {
				width: 330px;
				height: 83px;
				/* border: 1px solid #000; */
				margin: auto auto;
				position: relative;
				top: 80px;
			}

			#yanzheng .p3 {
				float: left;
				margin: 0 0 20px 0;
				color: #666666;
			}

			#yanzhengma_kuang {
				float: left;
				width: 210px;
				height: 42px;
				border: 1px solid #E0E0E0;
			}

			#yanzhengma_input {
				width: 190px;
				height: 25px;
				margin: 9px 0;
				border: transparent;
			}

			#span_number {
				color: #FF6700;
			}

			#phonenumber {
				margin: 0 0 0 4px;
				color: #FF6700;
			}

			#yanzhengma_btn {
				width: 104px;
				height: 42px;
				float: right;
				border: 1px solid #E0E0E0;
				color: #9D9D9D;
				font-size: 14px;
				line-height: 42px;
			}

			#submit {
				width: 330px;
				height: 40px;
				position: relative;
				top: 110px;
				background-color: #FF6700;
				color: white;
				line-height: 40px;
				font-size: 14px;
				margin: auto auto;
			}

			#esc {
				width: 330px;
				height: 40px;
				position: relative;
				top: 120px;
				margin: auto auto;
				color: #666666;
				border: 1px solid #E0E0E0;
				font-size: 14px;
				line-height: 40px;
			}

			#esc:hover {
				color: #666666;
			}

			.dibu {
				width: 600px;
				height: 60px;
				/* border: 1px solid #000; */
				color: #757575;
				font-size: 14px;
			}

			.dibu_nav li {
				list-style: none;
				display: inline-block;
				margin: 5px 10px;
				/* color: #C2B0B7; */
			}

			.dibu {
				margin: auto auto;
				position: relative;
				top: 380px;
				line-height: 20px;
			}

			.dibu_nav_dwon li {
				list-style: none;
				display: inline-block;
				margin: 5px 10px;
				/* color: #C2B0B7; */
			}
		</style>
	</head>
	<body>
		<div id="bigbox">
			<div id="erweima"></div>
			<div class="logo">
				<img src="http://s02.mifile.cn/assets/static/image/mi-logo.png">
			</div>
			<p class="p1">注册小米账号</p>
			<p class="p2">我们已经发送一条验证短信至<span id="span_number">+86</span><span id="phonenumber"></span></p><br />
			<div id="yanzheng">
				<p class="p3">请输入短信中的验证码</p><br />
				<div id="yanzhengma_kuang">
					<input type="text" name="yanzhengma_input" id="yanzhengma_input" placeholder="请输入验证码" />
				</div>
				<div id="yanzhengma_btn">
					重新发送(<i id="time">60</i>)
				</div>
			</div>
			<div id="submit">
				下一步
			</div>
			<div id="esc">
				返回
			</div>
			<div class="dibu">
				<nav class="dibu_nav">
					<li style="color: #333333;font-size: 14px;">简体</li><span>|</span>
					<li>繁体</li><span>|</span>
					<li>English</li><span>|</span>
					<li>常见问题</li><span>|</span>
					<li>隐私政策</li>
				</nav>
				<nav class="dibu_nav_dwon">
					<li>小米公司版权所有-京ICP备10046444-<img src="https://account.xiaomi.com/static/res/9204d06/account-static/respassport/acc-2014/img/ghs.png">京公网安备11010802020134号-京ICP证110507号</li>
				</nav>
			</div>

			<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				$(function() {
				    
					function yanzhengma() {
						var code;
						$("#yanzhengma_input").on("input",function(){
							code = $("#yanzhengma_input").val();
							console.log(code);
						});
						var obj = JSON.parse(localStorage.getItem('obj'));
						console.log(obj);
						var number = obj.number;
						$("#phonenumber").text(number);
						$("#yanzhengma_btn").off("click");
						
						var i = 60;
						var time = setInterval(function() {
							$("#time").text(i);
							if (i == 0) {
								clearInterval(time);
								$("#yanzhengma_btn").on("mouseover", function a() {
									$("#yanzhengma_btn").css("background-color", "#F5F5F5");
									$("#yanzhengma_btn").off("mouseover").on("mouseover",a);
								});
								$("#yanzhengma_btn").on("mouseout", function b() {
									$("#yanzhengma_btn").css("background-color", "white");
									$("#yanzhengma_btn").off("mouseout").on("mouseout",b);
								});
								$("#yanzhengma_btn").text("重新发送");
								};
								
								$("#yanzhengma_btn").on("click", function () {
									$.ajax({
										url: "https://test.shop.deepe.ren/api/register/verify",
										data: {
											"phone": number
										},
										method: "post",
										success: function(data) {
											console.log(data);
											alert("您的验证码为："+data.data.code);
											localStorage.setItem('obj', JSON.stringify({
												number,code
											}));
											yanzhengma();
										},
										error: function() {
											alert("请求失败");
										}
										
									});
									$("#yanzhengma_btn").html("重新发送(<i id=\"time\">60</i>)");
								});
								i--;
							}, 1000);
							$("#submit").on("click",function(){
								localStorage.setItem('obj', JSON.stringify({number,code}));
								$(location).attr("href", "设置密码.html");
							});
							$("#esc").on("click", function() {
								$(location).attr("href", "注册界面.html");
							});
						};
					yanzhengma();
					});
				
			</script>
	</body>
</html>
